<script setup lang="ts">
import { reactive } from 'vue';

const props: any = defineProps<{
    ujt: any;
}>();

const { $fn } = props.ujt;
const apiRefData: any = reactive({
    dirpath: './webdata/upload/',
    path: '',
    dirlist: null,
    data: null,
});
apiDirFetch();
function apiDirFetch() {
    $fn.api['webserver']
        .apiGet(`/api/asaidir/manage/select/?path=${apiRefData.dirpath}`)
        .then((res: any) => {
            apiRefData.dirlist = res.data.children.filter(
                (item: any) => item.type === '.json'
            );
            console.log(666.701, res);
        });
}
function apiFileSelect(item: any) {
    apiRefData.path = `${apiRefData.dirpath}${item.name}`;
    $fn.api['webserver']
        .apiGet(`/api/asaijson/manage/select/?path=${apiRefData.path}`)
        .then((res: any) => {
            apiRefData.data = res.data;
            console.log(666.702, res);
        });
}
function apiFileDelete(item: any) {
    $fn.api['webserver']
        .apiGet(
            `/api/asaijson/manage/delete/?path=${apiRefData.dirpath}${item.name}`
        )
        .then((res: any) => {
            console.log(666.703, res);
            apiDirFetch();
        });
}
function apiFileSubmit() {
    $fn.api['webserver']
        .apiPost(
            `/api/asaijson/manage/update/?path=${apiRefData.path}`,
            apiRefData.data
        )
        .then((res: any) => {
            console.log(666.704, res);
        });
}
</script>

<template>
    <div class="as-file-area">
        <div class="as-table-area">
            <div class="as-table">
                <div class="as-table-body-new">
                    <div
                        class="as-table-row"
                        v-for="item in apiRefData.dirlist"
                        :key="item.name"
                    >
                        <div class="lim">{{ item.name }}</div>
                        <div>{{ item.size }}</div>
                        <div>{{ item.time }}</div>
                        <div>
                            <button @pointerdown.stop="apiFileSelect(item)">
                                Select
                            </button>
                        </div>
                        <div>
                            <button @pointerdown.stop="apiFileDelete(item)">
                                Delete
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="apiRefData.data">
            <input class="as-file-path" type="text" v-model="apiRefData.path" />
            <template v-if="typeof apiRefData.data === 'object'">
                <JsonEditor
                    :ujt="ujt"
                    :asaidata="{
                        eq: 3,
                        ic: 2,
                        data: apiRefData.data,
                        ty: 'json', // json txt
                    }"
                    :fnapi="$fn.api['webserver']"
                ></JsonEditor>
            </template>
            <template v-else>
                <textarea
                    v-model="apiRefData.data"
                    style="width: 100%; height: 528px"
                ></textarea>
            </template>
            <button @pointerdown.stop="apiFileSubmit()">
                {{ $fn.lg('asai.submit') }}
            </button>
        </div>
    </div>
</template>

<style scoped lang="scss">
.as-file-area {
    width: 100%;
    text-align: initial;
}
.as-file-path {
    width: 100%;
}
button {
    height: 38px;
    padding: 0 12px;
    margin-right: 12px;
    background-color: var(--cm8);
    color: var(--cm0);
}
</style>
